<template>
  <div class="caseArticle">
    <div class="container">
      <img :src="changeImgpath(caseContent.litpic)" class="proImg">
      <h2>{{caseContent.title}}</h2>
      <div class="caseSize">
        <p><strong>Material : </strong>{{ caseContent.app }}</p>
        <p><strong>Output size : </strong>{{ caseContent.fin }}</p>
        <div class="other" v-html="caseContent.other">
          {{ caseContent.other }}
        </div>
      </div>
      <div class="casebody" v-html="caseContent.body">
        {{ caseContent.body }}
      </div>
      <h3>RELATED PRODUCTS</h3>
      <el-row :gutter="20" class="pro">
        <el-col :span="12" v-for="item in reProList" :key="item.id">
          <router-link :to="'/product/' + (item.id)">
            <div class="grid-content proImg">
              <img :src="item.proimg" class="img-res">
            </div>
            <p>{{item.title}}</p>
          </router-link>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      caseContent: {},
      reProList: [
        {title: 'Mobile Impact Crusher', id: 22, proimg: '//www.kefid.com/v3/uploads/130517/1-13051G13U1U0.jpg'},
        {title: 'Deep Rotor VSI Crusher', id: 15, proimg: '//www.kefid.com/v3/new-style/images/crusher_11.jpg'},
        {title: 'MTW-Series European Tech. Grinding Mill', id: 34, proimg: '//www.kefid.com/v3/new-style/images/mill_03.jpg'},
        {title: 'Vibrating Feeder', id: 28, proimg: '//www.kefid.com/v3/new-style/images/wash_05.jpg'}
      ]
    }
  },
  async mounted () {
    await axios.get('/case/' + this.$route.params.caseId).then(response => {
      this.caseContent = response.data.data
      document.title = this.caseContent.title
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    changeImgpath (img) {
      img = '//www.kefid.com' + img
      return img
    }
  }
}
</script>
<style scoped lang="css">
.container{
  padding-top: 52px;
}
.container h3{
  border-left: 0.2rem solid #db3f28;
  font-size: 1.4rem;
  background: #eee;
  padding: 0.8rem 1rem;
}
.container p{
  font-size: 1.4rem;
}
.container .proImg{
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}
.fastMessage a{
  display: block;
  text-align: center;
  color: #fff;
  padding: 0.8rem 0;
}
.fastMessage .inquiry{
  background: #db3f28;
}
.fastMessage .message{
  background: #444853;
}
.pro .el-col-12{
  float: none;
  display: inline-block;
  vertical-align: top;
}
.pro a{
  color: #333;
  display: block;
}
.pro {
  font-size: 0;
}
.pro a p{
  font-size: 1.2rem !important;
}
.caseSize{
  background-color: #f1f1f1;
  padding: 0.5rem 1rem;
}
</style>
<style lang="css">
.mainP,.box-card p{
  font-size: 1.4rem;
}
.feed .el-card__body{
  padding: 0.5rem 1rem;
}
.caseSize .kd-f,.caseSize strong{
  color: #db3f28;
}
.casebody h1{
  border-left: 0.2rem solid #db3f28;
  font-size: 1.4rem;
  background: #eee;
  padding: 0.8rem 1rem;
}
.caseArticle p{
  font-size: 1.4rem !important;
}
</style>
